<template>
  <view>
    <view class="cirlistBox">
      <block v-if="teamlist.length > 0">
        <view class="cirlist" v-for="(item, index) in teamlist" :key="index"
          :style="item.Logo ? 'background-image: url(' + (item.Logo) + ');background-size: cover;background-repeat:no-repeat;' : 'background-color:#fff'"
          @click="nav_to('/pages/together/cirDetail?id=' + item.ID)">

          <view class="cirinfobox">
            <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
            <view class="cirinfo">
              <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
              <view class="cirrem hiddenText">{{ $util.entitiesToUtf16(item.Tips) }}</view>
            </view>
            <!-- <view class="cirquit" v-if="item.IsJoin == 1" @click.stop="quitTeam(item, index)">
                <view class="jointext">退出</view>
              </view> -->
            <!-- <view  class="cirjoin" @click.stop="JoinTeam(item.ID, index)">
              <image class="joinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
              </image>
              <view class="jointext">加入</view>
            </view> -->
          </view>
          <view class="cirstatus">圈子状态:{{ statusType[item.Status] }}</view>
          <view class="activitybox">
            <view class="actcon">
              <view class="dectitle">圈子介绍</view>
              <view class="dectext">{{ $util.entitiesToUtf16(item.Descript) }}</view>
            </view>
          </view>
          <view class="btnBox" v-if="item.Status == 0">
            <view class="btn_" @click.stop="auditItem(item.ID, -1, index, '拒绝')">
              拒绝
            </view>
            <view class="btn_ btn_soild" @click.stop="auditItem(item.ID, 1, index, '同意')">
              同意
            </view>
          </view>
          <view class="btnBox" v-else>
            <view class="btn_" @click.stop="auditItem(item.ID, 1, index, '启用')">
              启用
            </view>
            <view class="btn_ btn_No_soild" @click.stop="auditItem(item.ID, -99, index, '禁用')">
              禁用
            </view>
          </view>
          <view class="blackshadow"></view>
        </view>
        <view style="height: 100rpx;"></view>
      </block>
      <block v-else>
        <view class="empty">
          <u-empty mode="list" width="100" height="100"
            icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
            iconSize="32" :text="sortindex == 0 ? '暂无圈子' : '暂无数据'"></u-empty>
        </view>
      </block>
    </view>
    <uni-popup type="center" ref="cirishBox">
      <view class="cirPop">
        <view class="group_textarea">
          <view class="dectitle">拒绝理由</view>
          <textarea style="width: 100%;height: 54%; font-weight: 400;" :value="auditRemark"
            placeholder="请填写拒绝理由，不写则默认为：很抱歉您的圈子不符合挥友圈相关规定。" placeholder-class="remtext" maxlength="1000"
            @input="inputrem" />
        </view>
        <view class="subBtn" @click="refuseCir()">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      teamlist: [],
      PageIndex: 1,
      PageSize: 10,
      auditRemark: '',
      nowInfo: {
        id: 0,
        index: 0,
      },
      statusType: {
        0: '待审核',
        1: '已通过',
        '-1': '已拒绝',
        '-99': '已禁用',
      }
    };
  },
  onLoad() {
    this.MyTeam()
  },
  // 触底事件
  onReachBottom() {
    if (this.isMore) {
      this.PageIndex++
      this.MyTeam()
    }
  },
  methods: {
    async MyTeam() {
      let res = await this.$api.post("Team/AuditList  ", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.load = true
        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
      }
      this.canChoose = true
      uni.hideLoading();
    },
    //同意或拒绝圈子(1 同意  -1 拒绝  -99 禁用)
    async auditItem(id, status, index, text) {
      let _this = this;
      if (status == -1) {
        if (_this.nowInfo.id != id) {
          _this.auditRemark = ''
        }
        _this.nowInfo = {
          id: id,
          index: index
        }
        _this.$refs.cirishBox.open()


        return
      }
      let content = `确定要${text}该圈子吗？`
      uni.showModal({
        title: '温馨提示',
        content: content,
        confirmText: text,
        success: async function (rs) {
          if (rs.confirm) {
            _this.apiSignComfirm(id, status, index)
          } else if (rs.cancel) {
          }
        }
      });

    },
    async apiSignComfirm(id, status, index) {
      let remak = status == 1 ? '' : (this.auditRemark || '很抱歉您的圈子不符合挥友圈相关规定')
      this.$api.post('Team/Audit', {
        ID: id,
        Status: status,
        AuditRemark: remak
      }).then(res => {
        const { code, data, message } = res
        if (code == 0) {
          // this.teamlist.splice(index, 1)
          this.teamlist[index].Status = status
          this.$pv.msg('操作成功');
          this.auditRemark = ''
          this.nowInfo = {
            id: 0,
            index: 0,
          }
          this.$refs.cirishBox.close()
        } else {
          this.$pv.msg(message);
        }

      });

    },
    // 填写原因拒绝审核
    refuseCir() {
      this.apiSignComfirm(this.nowInfo.id, -1, this.nowInfo.index)
    },
    inputrem(e) {
      const { value, cursor } = e.detail
      let str = this.$util.entitiesToUtf16(value)
      if (str.length > 100) {
        this.auditRemark = str.slice(0, 100)
      } else {
        this.auditRemark = str
      }
    },
    getTime2(l) {
      let d = new Date(l);
      let timestamp = d.getTime();
      return this.$u.date(timestamp, 'mm-dd');
    },
    imglist1(e) {
      if (!e) {
        return []
      }
      let list = e.slice(0, 6)
      return list
    },
  },

}
</script>
<style lang='scss'>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 30rpx;
  z-index: 10;

  .btn_ {
    margin: 0 30rpx;
    font-size: 20rpx;
    color: #fff;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    border: 2rpx solid #E4E4E4;
    min-width: 100rpx;
  }

  .btn_soild {
    color: #fff;
    background: #706EEE;
    border: 2rpx solid #706EEE;
  }

  .btn_No_soild {
    background: #FC4F45;
    border: 2rpx solid #FC4F45;
    color: white;
  }
}

.cirlistBox {
  width: 100%;
  padding: 24rpx;
}

.cirlist {
  position: relative;
  width: 100%;
  // height: 630rpx;
  border-radius: 24rpx;
  // padding: 36rpx 32rpx;
  // background-color: #9796ed;
  // margin: 0 auto;
  margin-bottom: 24rpx;
  padding-bottom: 36rpx;

  .cirinfobox {
    position: relative;
    display: flex;
    align-items: center;
    // margin-bottom: 32rpx;
    padding: 36rpx 32rpx;
    z-index: 10;

    .hdimg {
      min-width: 104rpx;
      max-width: 104rpx;
      height: 104rpx;
      border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 120rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirquit {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .cirstatus{
    width: 584rpx;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #EFEFEF;
    padding: 16rpx 0;
    z-index: 10;
  }

  .activitybox {
    position: relative;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 10;

    .actcon {
      width: 584rpx;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      margin: 0 auto;
      overflow: auto;
      padding: 24rpx;

      .dectitle {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }

      .dectext {
        font-size: 20rpx;
        color: #333333;
        white-space: pre-wrap;
      }

    }
  }

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }
}

.cirPop {
  width: 644rpx;
  max-height: 1030rpx;
  background-color: #FFFFFF;
  overflow: auto;
  border-radius: 54rpx;
  padding: 40rpx;

  .group_textarea {
    height: 264rpx;
    margin-top: 30rpx;
    // background-color: #fff;
    // padding-left: 32rpx;
    // text-indent: 2em;
    box-sizing: border-box;
    position: relative;

    .remtext {
      font-size: 28rpx !important;
      color: #C2C2C2 !important;
      font-weight: 400 !important;
    }

    .dectitle {
      margin-bottom: 25rpx;
    }
  }

  .subBtn {
    margin: 20rpx auto;
    font-size: 20rpx;
    color: #fff;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    min-width: 100rpx;
    background: #706EEE;
    border: 2rpx solid #706EEE;
    text-align: center;

  }
}
</style>